<template>
  <div style="width:100%;">
    <!-- 选择文件按钮 -->
    <div class="table-header" v-if="header">
      <el-button type="primary" @click="openFileDialog">选择文件</el-button>
    </div>

    <!-- 表格 -->
    <el-table :data="tableData" border style="width: 100%; margin-top: 16px;">
      <el-table-column prop="title" label="文件名" align="center" />
      <el-table-column prop="type" label="文件类型" align="center">
        <template #default="scope">
        <dict-tag :type="DICT_TYPE.OA_FILE_CLASS" :value="scope.row.fileClass" />
      </template>
        
      </el-table-column>
      <!-- <el-table-column prop="createTime" :formatter="dateFormatter" label="创建时间" align="center" /> -->
      <el-table-column prop="createName" label="创建人" align="center" />
      <el-table-column label="操作" align="center" min-width="50px">
      <template #default="scope">
        <el-button type="primary" link @click="openViewForm(scope.row)">查看</el-button>
        <el-button type="primary" link @click="handleDownload(scope.row)">下载</el-button>
        
      </template>
    </el-table-column>
    </el-table>

    <!-- 分页 -->
    <!-- <div class="pagination">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :page-size="pageSize"
        :current-page="currentPage"
        @current-change="handlePageChange"
      />
    </div> -->
<!-- 修改文件或文件夹信息-->
<UpdateFileForm ref="formUpdateRef"  />
  <Dialog
  :title="officeView.title || '文档预览'" v-model="officeView.dialog" width="100vh" :fullscreen="true" top="5vh"
    :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false" destroy-on-close>
    <vue-office-docx v-if="officeView.type == 'doc'" :src="officeView.url" style="height: 80vh;" />
    <vue-office-excel
v-if="officeView.type == 'excel'" :options="officeView.xlsOptions" :src="officeView.url"
      style="height: 80vh;" />
    <vue-office-pdf v-if="officeView.type == 'pdf'" :src="officeView.url" style="height: 80vh;" />
    <AudioPlayer  v-if="officeView.type == 'audio'" :src='officeView.url' />
  </Dialog>
  </div>
</template>

<script lang="ts" setup>
import { DICT_TYPE } from '@/utils/dict'
import { ref, defineProps, defineEmits } from 'vue'
import { dateFormatter } from '@/utils/formatTime'
import * as FileApi from '@/api/infra/file'
import { OaFileClassType } from '@/utils/constants'
import { HomeFilled, Microphone, VideoCamera, Paperclip, ElementPlus } from '@element-plus/icons-vue'
import { createImageViewer } from '@/components/ImageViewer'
import { createVideoViewer } from '@/components/VideoPlayer/index'
import UpdateFileForm from '@/views/infra/file/UpdateFileForm.vue'
//引入VueOfficeDocx组件
import VueOfficeDocx from '@vue-office/docx'
//引入相关样式
import '@vue-office/docx/lib/index.css'
//引入VueOfficeExcel组件
import VueOfficeExcel from '@vue-office/excel'
//引入相关样式
import '@vue-office/excel/lib/index.css'
//引入VueOfficePdf组件
import VueOfficePdf from '@vue-office/pdf' 
import download from '@/utils/download'

const message = useMessage() // 消息弹窗

const props = defineProps({
  header: {
    type: Boolean,
    default: true
  },
  tableData: {
    type: Array,
    default: () => []
  }
})
const emit = defineEmits(['openFileDialog'])
 

// 分页相关
const total = ref(0)
const pageSize = ref(10)
const currentPage = ref(1)



// 打开文件选择弹框
const openFileDialog = () => {
  emit('openFileDialog')
}

/** 修改文件或文件夹信息 */
const formUpdateRef = ref()

const officeView = ref({
  url: '',
  dialog: false,
  type: '',
  title: '',
  xlsOptions: {
    xls: false,       //预览xlsx文件设为false；预览xls文件设为true
    minColLength: 0,  // excel最少渲染多少列，如果想实现xlsx文件内容有几列，就渲染几列，可以将此值设置为0.
    minRowLength: 0,  // excel最少渲染多少行，如果想实现根据xlsx实际函数渲染，可以将此值设置为0.
    widthOffset: 10,  //如果渲染出来的结果感觉单元格宽度不够，可以在默认渲染的列表宽度上再加 Npx宽
    heightOffset: 10, //在默认渲染的列表高度上再加 Npx高
    beforeTransformData: (workbookData) => { return workbookData }, //底层通过exceljs获取excel文件内容，通过该钩子函数，可以对获取的excel文件内容进行修改，比如某个单元格的数据显示不正确，可以在此自行修改每个单元格的value值。
    transformData: (workbookData) => { return workbookData }, //将获取到的excel数据进行处理之后且渲染到页面之前，可通过transformData对即将渲染的数据及样式进行修改，此时每个单元格的text值就是即将渲染到页面上的内容
  }
})

// 查看文件
const openViewForm = (item: FileApi.FilePresignedUrlRespVO) => {
  console.log(item)
  //查看图片
  if (item.fileClass == OaFileClassType.IMAGE) {
    createImageViewer({ urlList: [item.url],zIndex:3999	 })
  } else if (item.fileClass == OaFileClassType.VIDEO) {
    //查看视频
    createVideoViewer({ url: item.url, poster: item.url })
  } else if (item.fileClass == OaFileClassType.OFFICE) {
    //https://501351981.github.io/vue-office/examples/docs/guide/
    //word
    if (item.path.indexOf('.doc') > -1) {
      officeView.value.url = item.url
      officeView.value.dialog = true
      officeView.value.type = 'doc'
    }
    else if (item.path.indexOf('.xlsx') > -1) {
      //WARNING 目前只支持xlsx文件预览，不支持xls文件。
      officeView.value.url = item.url
      officeView.value.dialog = true
      officeView.value.type = 'xlsx'
    }
    else if (item.path.indexOf('.pdf') > -1) {
      officeView.value.url = item.url
      officeView.value.dialog = true
      officeView.value.type = 'pdf'
    }
    else {
      message.error('暂不支持该文件类型预览,请下载后查看')
    }
  } else if (item.fileClass == OaFileClassType.ON_LINE) {
    //todo 在线文档
    formUpdateRef.value.open(item.id, 'online',true)
  } else if (item.fileClass == OaFileClassType.AUDIO) {
    officeView.value.title = item.name || '音频预览'
    officeView.value.url = item.url
    officeView.value.dialog = true
    officeView.value.type = 'audio'
    
    //todo 音频文件,可参照AI模块. /ai/music/index
  } else {
    message.error('暂不支持该文件类型预览,请下载后查看')
  }

}

/** 文件下载 */
const handleDownload = async (item) => {
  download.file(item.url, item.name || 'download.jpg')
}


// 分页切换
// const handlePageChange = (page: number) => {
//   currentPage.value = page
//   const start = (page - 1) * pageSize.value
//   const end = page * pageSize.value
//   tableData.value = selectedFileIds.value.slice(start, end).map((id, index) => ({
//     id,
//     title: `文件${index + 1}`,
//     type: '文档',
//     createTime: '2025-06-17',
//     creator: '管理员'
//   }))
// }
</script>

<style scoped>
.table-header {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 16px;
}

.pagination {
  margin-top: 16px;
  display: flex;
  justify-content: center;
}
</style>